<template>
	<view>
		<view class="searchbox" @click="togoodslist()">
			<view class="search">
				<view class="scan">
					<image src="../../static/ss.png"></image>
				</view>
				<view class="inputbox">
					<input v-model="keyword" placeholder="搜索商品" />
				</view>
				<view class="searchbut" @click="reset()">搜索</view>
			</view>
		</view>
		<!-- <None v-if="!list.length && !loading && isEnd"></None> -->
		<view class="listbox" v-for="(item, index) in list" :key="index" @longtap.prevent="longclick(index)" @click="toDetail(item.goods_id)">
			<!-- 黑幕 -->
			<view class="opacitybox" v-if="index == currone">
				<!-- <image @click.stop="delcollect(item)" src="../../static/image/sc2.png"></image> -->
				<view class="actbox">
					<view @click.stop="delcollect(item)">删除</view>
					<view @click.stop="currone=null">取消</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="leftbox">
				<image :src="item.url"></image>
			</view>
			<view class="rightbox">
				<view class="namebox">{{item.goods_name}}</view>
				<view class="numbox">{{item.counts}}人收藏</view>
				<view class="pricebox">￥{{ item.goods_price_min }}</view>
				<!-- <view class="similar">找相似</view> -->
			</view>
		</view>
	</view>
</template>

<script>
// import None from '../../components/none.vue'

export default {
	// components:{None},
	data() {
		return {
			currone: null,
			page: 1,
			isEnd: false,
			loading: false,
			list: [],
			keyword:'',
		}
	},
	onReachBottom() {
		this.getList()
	},
	onLoad() {
		this.getList()
	},
	methods: {
		toDetail(id){
			if(this.currone!=null && this.list[this.currone].goods_id == id)return
			uni.navigateTo({ url: '/pageshop/goodsinfo/goodsinfo?id='+id })
		},
		// 获取收藏列表
		async getList() {
			if (this.loading || this.isEnd) return
			this.loading = true
			try {
				let res = await this.$http({
					url: '/api/Wechat/user_collect',
					data: {
						page_index: this.page,
						page_size: 12,
						keyword:this.keyword,
					}
				})
				if (res.data.length < 12) {
					this.isEnd = true
				}
				this.list = [...this.list, ...res.data]
				this.page++
			} catch {

			}finally{
				this.loading = false
			}
		},
		reset(){
			this.page = 1
			this.list = []
			this.getList()
		},
		longclick(index) {
			console.log('longs')
			this.currone = index
		},
		delcollect(item){
			const idlist =[]
			idlist.push(+item.id)
			this.$http({
				url:'/api/Wechat/cancel_collect_goods',
				data:{
					id:idlist
				}
			}).then(res=>{
				this.isEnd = false
				this.list=[]
				this.page = 1,
				this.getList()
			})
		}
	}
}
</script>

<style>
page {
	background-color: #F7F7F7;
}
</style>
<style lang="scss" scoped>
.opacitybox {
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	// background-color: #000000;
	// opacity: 0.5;
	height: 284rpx;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	text-align: center;

	image {
		width: 86rpx;
		height: 86rpx;
		margin: 30rpx 0;
	}

	.actbox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 60%;
		margin: 0 auto;

		>view {
			width: 100rpx;
			height: 46rpx;
			border-radius: 23rpx;
			border: 2rpx solid #FFFFFF;
			line-height: 46rpx;
			text-align: center;
			font-size: 26rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}

.listbox {
	display: flex;
	justify-content: space-between;
	background-color: #FFF;
	padding: 12rpx 30rpx;
	align-items: center;
	height: 260rpx;

	.leftbox {
		width: 250rpx;

		image {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.rightbox {
		width: 426rpx;

		.namebox {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			-webkit-line-clamp: 2;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.numbox {
			font-size: 26rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #888888;
			margin: 15rpx 0;
		}

		.pricebox {
			font-size: 30rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #FF6178;
		}

		.similar {
			width: 109rpx;
			height: 44rpx;
			background: #FFFFFF;
			border-radius: 22rpx;
			border: 2rpx solid #DBDBDB;
			text-align: center;
			line-height: 44rpx;
			font-size: 26rpx;
			color: #888888;
			margin-top: 12rpx;
			float: right;
		}
	}
}
.searchbox {
		width: 100%;
		height: 134rpx;
		display: flex;
		align-items: center;
		background-color: #FFF;
		// margin-top: 40rpx;

		.search {
			width: 690rpx;
			height: 40rpx;
			padding: 15rpx 0;
			background: #FFFFFF;
			border-radius: 36rpx;
			border: 2rpx solid #E2E2E2;
			display: flex;
			align-items: center;
			margin: 0 auto;

			.scan {
				width: 76rpx;
				text-align: center;
				// border-right: solid 2rpx #F2F2F2;

				image {
					width: 33rpx;
					height: 28rpx;
				}
			}

			.inputbox {
				width: 448rpx;
				height: 40rpx;
				padding: 0 24rpx;

				>input {
					width: 100%;
				}
			}
			.searchbut {
				width: 120rpx;
				height: 68rpx;
				background: #FF8A9B;
				border-radius: 36rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #F7F7F7;
				line-height: 68rpx;
				text-align: center;
			}
		}
	}
</style>
